<template>
  <el-form name="ruleForm" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
           class="rule-form">
    <el-form-item prop="college">
      <el-select v-model="ruleForm.college" filterable placeholder="请选择所在学院">
        <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item">
          {{ item }}
        </el-option>
      </el-select>
    </el-form-item>


    <el-form-item prop="name" class="rule-form-input-item">
      <el-input placeholder="请输入真实姓名" v-model="ruleForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item prop="number" class="rule-form-input-item">
      <el-input placeholder="请输入学号/工号" v-model="ruleForm.number" autocomplete="off"></el-input>
    </el-form-item>


    <el-button class="btn" type="primary"
               v-loading.fullscreen.lock="fullscreenLoading"
               @click="submitForm('ruleForm')">注册
    </el-button>

  </el-form>
</template>

<script>
import {collegeGetAllName} from "@/apis/common";
import {stuRegister} from "@/apis/common";


export default {
  name: 'RegisterSecond',
  data() {
    return {
      fullscreenLoading: false,
      // 各大学校选项
      options: [
        // {value: '郑州经贸学院', label: '郑州经贸学院'}, {value: '河南工业大学', label: '河南工业大学'},
        // {value: '郑州大学', label: '郑州大学'}, {value: '青岛海洋大学', label: '青岛海洋大学'},
      ],
      value: '',
      ruleForm: {
        username: '',
        password: '',
        college: '',
        name: '',
        number: '',
      },
      //表单验证，需要在el-form-item元素中增加 prop 属性
      rules: {
        name: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        number: [
          {required: true, message: '学号/工号不能为空', trigger: 'blur'},
          {type: 'string', len: 14, message: "请输入正确格式的工号", trigger: 'blur', pattern: /[1-9]\d{10}[^0]\d{2}/}
        ],
      },
    }
  },
  created() {

    this.init()
  },

  methods: {
    // 初始化方法
    init() {
      // 获取所有学校名称
      collegeGetAllName().then((resp) =>{
        this.options = resp?.data?.data
      })

    },


    // 注册
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 获得first页面传来的账号和密码
          let firstForm = this.$route.params.ruleForm
          this.ruleForm.username = firstForm.phone === '' ? firstForm.email : firstForm.phone
          this.ruleForm.password = firstForm.password
          // 向后端发送需要注册的学生信息
          stuRegister(this.ruleForm).then((resp) => {
            if(resp?.data?.code == 1){

              this.ruleForm = {}
              this.$message.success("注册成功，请返回登录")
            }else{
              // 注册失败
              this.$message.error(resp?.data?.msg)
            }
          })
        } else {

          return false;
        }
      });
    },


    // 获取下拉框所有学校信息


  }


}
</script>

<style scoped>


div {
  box-sizing: border-box;
  display: block;
}

.sign-body-header {
  display: block;
}

.rule-form {
  width: 420px;
  margin: 0 auto;
  display: block;
}
.rule-from-input-items {

}

.rule-form-input-item {
  margin-bottom: 22px;
}

.rule-form-input-div {
  line-height: 44px;
  display: inline-block;
  font-size: 14px;
  position: relative;
  width: 100%;
}

.input-item {
  height: 44px;
  line-height: 44px;
  -webkit-appearance: none;
  background-image: none;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  width: 100%;
}


button, select {
  text-transform: none;
}

.btn {
  margin-top: 18px;
  width: 100%;
  padding: 14px 20px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  background-color: #ea5947;
  border-color: #ea5947;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  transition: .1s;
  font-weight: 400;
  -webkit-user-select: none;
  font-size: 14px;
  border-radius: 4px;
  min-width: 88px;
}

span {
  color: #fff;
  line-height: 1;
  font-size: 14px;
}

.login {
  color: #444;
  background-color: transparent;
  text-decoration: none;
}
</style>